<template>
	<view>
		<page-meta>
			<navigation-bar :title="titles[step-1]"></navigation-bar>
		</page-meta>
		<view v-for="(list, key) in get.fields" :key="$index">
			<view v-show="list[0].step==step">
				<view>{{types[key]}}</view>
				<view class="cell" v-for="(field, idx) in list" :key="idx">
					<view class="cell-title">{{field.name}}</view>
					<evan-checkbox @change="changeChecked($event, key, idx)" v-if="field.chooseType==1" class="cell-content">
						{{field.chooseVal}}
					</evan-checkbox>
					<input :data-idx="field.id" @input="changeInput($event, key, idx)" 
					:placeholder="field.chooseVal || field.name" v-else-if="field.chooseType==2" 
						class="cell-content" type="text"/>
				</view>
			</view>
		</view>
		<form @submit="submit" v-show="step==3">
			<view class="card">
				<view style="font-weight: bold;">服务内容
					<text style="font-size: small;color: red;">(必填)</text>
				</view>
				<textarea style="display: block;width: auto;" v-model="post.remark" maxlength="200" 
				placeholder="请输入服务内容,不超过200字" placeholder-class="gst"/>
			</view>
			<view class="card">
				<view style="font-weight: bold;">添加现场照片</view>
				<mk-upload back="#F8F8F8" :column="3" :imgList="picUrls" @onChoose="chooseImg" @onDelete="deleteImg"></mk-upload>
			</view>
			<view style="margin-bottom: 100rpx;"></view>
		</form>
		<view class="bottom horizontal">
			<button class="capsule scale" style="background: #979EAE;color: white;" v-if="step>1" 
			@tap="this.step--">上一步</button>
			<block v-if="step==steps">
				<button disabled v-if="post.remark.length<4 || picUrls.length==0" style="color: white;background-color: gray;" class="capsule scale">提交工单</button>
				<button v-else style="color: white;background-color: var(--color-ok);" class="capsule scale" @tap="submit">提交工单</button>
			</block>
			<button class="capsule scale" style="background: #007AFF;color: white;" v-if="step<steps" 
			@tap="this.step++">下一步</button>
		</view>
	</view>
</template>

<script>
	import EvanCheckbox from '../../components/evan-checkbox/evan-checkbox.vue'
	
	const app = getApp()
	export default {
		components:{
			EvanCheckbox, 
		},
		onLoad(opts) {
			this.post.workId = opts.id
			this.getForms(1)
		},
		data() {
			return {
				source: '',
				loaded: false,
				titles:[
					'清洁与设备状况记录表', '维护人员日常巡检总表', '工单详情',  
				],
				types:{
					cleanList: '卫生清洁', equipmentList: '设备运行', dailyCheckList: '日常巡检',
				},
				steps: 3,
				step: 1,
				id:'',
				get:{
					fields:{
						
					}
				},
				post:{
					workId: '',  // 工单id
					remark: ""  ,// 服务内容或备注
					// 故障图片
					picUrls:[
						
					],
					repairProjectDtoList:[
						
					]
				},
				picUrls:[
					
				],
				uploaded:0,
			}
		},
		watch:{
			uploaded(newVal){
				if(newVal>=this.picUrls.length){
					const repairProjectDtoList = []
					for (const group in this.get.fields) {
						repairProjectDtoList.push(...this.get.fields[group].map(field=>{
							return {
								repairProjectId: field.id, 
								value: field.value,
							}
						}))
					}
					// 已经上传完所有的图片，可以进行表单提交
					uni.request({
						header:{
							Authorization: 'Bearer ' + app.globalData.token,
						},
						url: app.globalData.domain + 'workOrder/commit',
						method: 'POST',
						data: {
							workId: this.post.workId,
							remark: this.post.remark,
							picUrls: this.post.picUrls.join(','),
							repairProjectDtoList,
						},
						success: res => {
							const {data} = res
							if(data.code==200){
								uni.hideLoading()
								uni.showModal({
									showCancel: false,
									title:'提交',
									content: '提交工单成功，请等待管理员审核！',
									success: (res) => {
										if(res.confirm){
											uni.navigateBack({
												delta:2,
											})
										}
									},
								})
							}else if(data.code==500){
								uni.hideLoading()
								uni.showToast({
									icon:'none',
									title: data.message,
								})
							}
						},
						fail: (err) => {console.error(err)},
						complete: () => {}
					});
				}
			},
			step(newVal, oldVal){
				if(oldVal==1 && newVal==2 && !this.loaded){
					this.loaded=true
					this.getForms(2)
				}
			}
		},
		methods: {
			changeChecked(evt, field, idx){
				console.log(field, idx)
				this.get.fields[field][idx].value = evt?1:0
			},
			
			getForms(step=1){
				const url = step==1?'workOrder/getCleanAndEquipmentRecord/':'workOrder/getDailyCheck/'
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + url + this.post.workId,
					method: 'GET',
					data: {},
					success: res => {
						const {data} = res
						console.log(data)
						if(data.code==200){
							for (const group in data.data) {
								data.data[group]=data.data[group].map(field=>{
									return{
										value: field.chooseType==1?0:'',
										...field,
										step,
									}
								})
								this.$set(this.get.fields, group, data.data[group])
							}
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			changeInput(evt, field, idx){
				this.get.fields[field][idx].value=evt.detail.value
			},
			changeChecks(evt){
				console.log(evt)
				// 遍历所有的选框
				// for (const group in this.get.fields) {
				// 	for (const field of this.get.fields[group]) {
				// 		if(field.chooseType==1){
				// 			field.value=0
				// 		}
				// 	}
				// }
				// for (const pair of evt.detail.value) {
				// 	const [field, idx] = pair.split(',')
				// 	console.log(field, idx)
				// 	this.get.fields[field][idx].value=1
				// }
				console.log(this.post.repairProjectDtoList)
			},
			chooseImg(evt){
				this.picUrls.push(...evt.tempFilePaths)
			},
			deleteImg(evt){
				this.picUrls.splice(evt, 1)
			},
			submit(){
				uni.showLoading({
					title:'上传图片中...'
				})
				this.post.picUrls.push(...this.picUrls)
				// 依次循环上传图片集
				for (let i=0;i<this.picUrls.length;i++) {
					const idx = i				// 闭包作用
					const pic = this.picUrls[idx]
					uni.uploadFile({
						header:{
							Authorization: 'Bearer ' + app.globalData.token,
						},
						url: 'https://api.isaim.cn/maintenance/file/upload',
						filePath: pic,
						name: "file",
						formData:{},
						fail:(err)=>{console.error(err)},
						success:(res)=>{
							let data = JSON.parse(res.data)
							if(data.code==200){
								const url = data.data
								// 记录下图片的远程地址
								this.post.picUrls[idx] = url
								console.log(url)
								this.uploaded++
							}else if(data.code==500){
								uni.showToast({
									icon:'none',
									title: data.message,
								})
							}
						}
					})
				}
			},

		}
	}
</script>

<style>

</style>
